import StudentList from './components/StudentList';
import {useEffect} from "react";
import StuContext from "./store/StuContext";
import useFetch from "./hooks/useFetch";


const App = ()=> {
  const {data, loading, error, fetchData} = useFetch({
    url: "students",
  });

  useEffect(() => {
    fetchData();
  }, []);

  const loadStudents = () => {
    fetchData();
  }

  return (
    <StuContext.Provider value={{fetchData}}>
      <div style={{display: "flex", justifyContent: "center"}}>
        <div className="App">
          <button onClick={loadStudents}>刷  新</button>
          {!loading && <StudentList stuList={data} />}
          {loading && <p>数据正在加载中....</p>}
        </div>
      </div>
    </StuContext.Provider>
  );
}

export default App;
